<template>
	<view>
		<v-tabs fixed v-model="activeTab" :scroll="false" :lineHeight="0" :tabs="['待派单', '已派单', '待审批', '历史工单']" @change="changeTab"></v-tabs>
		<block v-if="curList.list.length>0">
			<navigator class="item" v-for="(item, idx) in curList.list" :key='item.id'
			:url="`../gd_detail/gd_detail?id=${item.id}`">
				<view class="horizontal">
					<view style="font-weight: bold;">工单号 {{item.no}}</view>
					<view class="ing" v-if="item.type==5 && item.status==4">待审核</view>
					<view :class="item.status<=2?'will':(item.status<=4?'ing':'ed')" v-else>{{statuses[item.status-1]}}</view>
				</view>
				<view class="splitter"></view>
				<view class="gst">工单类型：{{types[item.type-1]}}</view>
				<view class="gst">申请时间：{{item.applyTime}}</view>
			</navigator>
		</block>
		<view class="vertical abscenter" v-else-if="curList.total===0">
			<image src="../../static/icons/empty.png" mode="widthFix" style="width: 150rpx;"></image>
			<view class="gst">暂时没有{{['待处理', '处理中', '已完成'][activeTab]}}的工单~~</view>
		</view>
	</view>
</template>

<script>
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	
	const app = getApp()
	
	export default {
		components:{
			vTabs, 
		},
		computed:{
			curList(){
				switch(this.activeTab){
					case 0:
					console.log(0)
					return this.will
					break
					case 1:
					console.log(1)
					return this.ing
					case 2:
					console.log(2)
					return this.ed
					case 3:
					return this.histories
				}
			}
		},
		onPullDownRefresh() {
			this.refreshRecord(this.curList, app.globalData.adurl + 'workOrder/list', {statusType: (this.activeTab || 0)+1})
		},
		data() {
			return {
				// 工单状态
				statuses:[
					'待派单', '待接单', '已接单', '待审核', '待评价', '审核通过', '已评价', 
				],
				// 工单类型
				types:[
					'开通', '报修', '报停', '恢复用水', '机房巡检', '更换滤芯', '机房维修'
				],
				post:{
					status: 1,
				},
				activeTab: 0,
				// 待派单
				will:{
					pageNum: 0,  	// 当前页数
					pageSize: 10, 	// 当前页数量(
					totalPage: '', 	// 总页数
					total: '', 		// 总记录数
					list:[
						
					]
				},
				// 处已派单
				ing:{
					pageNum: 0,  	// 当前页数
					pageSize: 10, 	// 当前页数量(
					totalPage: '', 	// 总页数
					total: '', 		// 总记录数
					list:[
						
					]
				},
				// 待审批
				ed:{
					pageNum: 0,  	// 当前页数
					pageSize: 10, 	// 当前页数量(
					totalPage: '', 	// 总页数
					total: '', 		// 总记录数
					list:[
						
					]
				},
				histories:{
					pageNum: 0,  	// 当前页数
					pageSize: 10, 	// 当前页数量(
					totalPage: '', 	// 总页数
					total: '', 		// 总记录数
					list:[
						
					]
				}
			}
		},
		onShow() {
			this.refreshRecord(this.curList, app.globalData.adurl + 'workOrder/list', {statusType: (this.activeTab || 0) + 1})
		},
		onLoad(opts) {
			if(opts.status){
				this.activeTab=Number.parseInt(opts.status)
			}
			this.pullNewRecord(this.curList, app.globalData.adurl + 'workOrder/list', 
			{statusType: this.activeTab + 1})
		},
		onReachBottom() {
			if(this.activeTab<3 && this.activeTab>=0){
				this.pullNewRecord(this.curList, app.globalData.adurl + 'workOrder/list', {statusType: this.activeTab + 1})
			}else if(this.activeTab==3){
				this.pullNewRecord(this.curList, app.globalData.adurl + 'workOrder/getFinishOrderList')
			}
		},
		methods: {
			changeTab(e){
				this.activeTab=e
				console.log(this.activeTab)
				this.curList.list=[]
				this.curList.pageNum=1
				if(e<3 && e>=0){
					this.refreshRecord(this.curList, app.globalData.adurl + 'workOrder/list', {statusType: this.activeTab + 1})
				}else if(e==3){
					this.refreshRecord(this.curList, app.globalData.adurl + 'workOrder/getFinishOrderList')
				}
			},
			// 下拉刷新
			refreshRecord(list, url, extra={}){
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
					header:{
						Authorization: 'Bearer '+app.globalData.token,
					},
					url,
					method: 'GET',
					data: {
						page: 1,
						size: list.list.length || 10,
						...extra,
					},
					success: res => {
						const {data} = res
						console.log(data)
						uni.hideLoading()
						if(data.code==200){
							list.pageNum = 1
							const d = data.data
							list.totalPage=d.totalPage
							list.total=d.total
							// 直接重置数组
							list.list=data.data.list
							uni.hideLoading()
							uni.stopPullDownRefresh()
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			// 拉取早起的历史数据
			pullNewRecord(list, url, extra={}){
				if(list.list.length>=list.total){
					return
				}
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
					header:{
						Authorization: 'Bearer '+app.globalData.token,
					},
					url,
					method: 'GET',
					data: {
						page: ++list.pageNum,
						size: list.pageSize || 10,
						...extra,
					},
					success: res => {
						const {data} = res
						if(data.code==200){
							console.log(data)
							uni.hideLoading()
							const d = data.data
							list.totalPage=d.totalPage
							list.total=d.total
							uni.hideLoading()
							if(d.total>list.list.length){
								if(d.list.length>0){
									list.list.push(...d.list)
								}
							}
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {console.error(err)},
				});
			},
		}
	}
</script>

<style scoped>
	.type{
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
	}
	
	.date{
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		color: #A3A3A3;
		line-height: 36rpx;
	}
	
	.id{
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		color: #666666;
		line-height: 36rpx;
	}
	
	.card{
		margin: 20rpx;
		border-radius: 10rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 10rpx;
	}
</style>
